<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./1.CSS">
    <!-- 引入css重置样式表 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- 引入字体图标文件 -->
    <title>Document</title>
    <style>
        body{
            background-color: aquamarine;
        }
        /* 设置盒子 */
        .box{
            width: 1903px;
            height: 29px;
            line-height: 31px;
            background-color: #e3e4e5;
            border-top: #ddd 1px solid;
            border-bottom: #ddd 1px solid;
        }
        /* 设置地点前的字体图标 */
        .icon-didian{
            color:#f10215;
            font-size: 17px;
        }
        /* 设置整体超链接的样式 */
        a:hover{
            color: red;
        }
        /* 设置地点 */
        .location{
            position: relative;
            float: left;
            margin-left: 357px;
            margin-right: 322px;
            /* 设置层级 */
            z-index: 999;
            /* 使字体居中 */
            text-align: center;
        }
        /* 设置的地点中的超链接 */
        .location a{
            position: relative;
            top: -2px;
            color: #999;
        }
        .location1{
            float: left;
            width: 58px;
            height: 100%;
        }

        /* 当鼠标移入location1时，设置a的样式 */
        .location1:hover a{
            color: #f10215;
        }
        .myJd:hover a{
            color: #f10215;
        }
        .city{
            /* 将块元素隐藏起来 */
            display: none;
            position: absolute;
            width: 322px;
            height: 463px;
            background-color: #FFFFFF;
            z-index: 99;
            top: 30px;
        }
        

        /* 设置“我的京东”栏目块 */
        .myJd{
            margin-left: 9px;
        }
        /* 设置“我的京东”栏目块的隐藏内容 */
        .myJdCt{
            /* 将块元素隐藏起来 */
            display: none;
            position: absolute;
            width: 282px;
            height: 162px;
            background-color: #FFFFFF;
            z-index: 99;
            top: 30px;
        }
        /* 当鼠标移入“地点”时，让city显示 */
        .location:hover .city{
            display: block;
        }
        /* 当鼠标移入"我的京东"时，让内容显示 */
        li:nth-child(5):hover .myJdCt{
            display: block;
        }



        /* 设置鼠标移入“地点”，“我的京东”，“企业采购”，“客户服务”，“网站导航”，“手机京东”时的背景颜色 */
        .location:hover,li:nth-child(5):hover,li:nth-child(9):hover,li:nth-child(11):hover,li:nth-child(15):hover{
            background-color: #FFFFFF;
        }
        /* 设置“我的京东”，“客户服务”，“企业采购”，“网站导航”中的箭头小图标 */
        .myJd i,.customerSvr i,.companyBuy i,.webLead i{
            /* 开启绝对定位，解决高度塌陷的问题 */
            position: absolute;
            /* 使图标向右移动3个像素 */
            margin-left: 3px;
        }


        /* 设置功能块列表 */
        li{
            float: left;
            color: #999;
        }
        /* 设置功能块列表中所有超链接的样式 */
        li a{
            color: #999;
        }
        /* 设置“企业采购”和“免费注册”中超链接的样式 */
        li:nth-child(9) a,#free{
            color: red;
        }        
        /* 设置功能块后面的竖条*/
        .border{
            width: 0;
            height: 10px;
            border: 1px #ccc solid;
            color: #ccc;
            margin: 11px 5px 0 5px;
        }
        /* 设置第一条竖条的样式 */
            #img{
            margin-left: 12px;
        }
        /* 设置向下图标的样式 */
        .icon-35_xiangxiajiantou{
            font-size: 6px;
            color: #999;
        }


        /* 设置“我的订单”，“京东会员”的盒子 */
        li:nth-child(3),li:nth-child(7){
            float: left;
            width: 62px;
            height: 31px;
            text-align: center;
        }        
        /* 设置“我的京东”，“企业采购”，“客户服务”，“网站导航”的盒子 */
        li:nth-child(5),li:nth-child(9),li:nth-child(11),li:nth-child(13){
            float: left;
            width:77px;
            height: 31px;
        }
        /* 设置“手机京东”，“网站无障碍”的盒子 */
            li:nth-child(15),li:nth-child(17){
            float: left;
            width:74px;
            height: 31px;
        }



        .customerSvr{
            margin-left: 10px;
        }
        .customerSvr i{
            float: right;
        }
        .customerSvrCt{
            /* 将其隐藏起来 */
            display: none;
            width: 172px;
            height: 272px;
            float: right;
            margin-top: -1px;
            background-color: #fff;
            z-index: 99;
        }


        li:nth-child(11):hover .customerSvrCt{
            display: block;
        }
        



        .webLead{
            margin-left: 10px;
        }
        .webLead i{
            float: right;
        }
        /* 设置网站导航中的内容 */
        .webLeadCt{
            display: none;
            float: right;
            width: 1190px;
            height: 180px;
            background-color: #FFFFFF;
            z-index: 99;
            margin-top: -1px;
            margin-right: -84px;
        }
        /* 设置鼠标移入“网站导航”时，让内容显示出来 */
        li:nth-child(13):hover .webLeadCt{
            display: block;
        }





        .phoneJD{
            text-align: center;
        }
        .phoneJD i{
            float: right;
        }
        /* 设置“手机京东”的内容 */
        .phoneJDCt{
            display: none;
            width: 192px;
            height: 507px;
            background-color: #FFFFFF;
            float: right;
            margin-top: -1px;
        }
        /* 设置鼠标移入“手机京东”时，让内容显示出来 */
        li:nth-child(15):hover .phoneJDCt{
            display: block;
        }



        /* 设置“网站无障碍”中内容的位置*/
        .webNonStop{
            text-align: center;
        }


        .companyBuy{
            margin-left: 9px;
        }
        .companyBuyCt{
            /* 将块元素隐藏起来 */
            display: none;
            position:absolute;
            width: 157px;
            height: 140px;
            background-color: #FFFFFF;
            z-index: 99;
            margin-top: -1px;
        }
        /* 当鼠标移入"企业采购"时，让内容显示 */
        li:nth-child(9):hover .companyBuyCt{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 整个盒子 -->
    <div class="box">
        <!-- 地点 -->
        <div class="location">
            <div class="location1">
                <i class="iconfont icon-didian"></i>
                <a href="#">广东</a>
            </div>
            <div class="city">

            </div>
        </div>
        <!-- 功能块 -->
        <ul>
            <li><a href="#">你好，请登录</a> &nbsp;<a href="#" id="free">免费注册</a></li>
            <li class="border" id="img"></li>
            <li><a href="#">我的订单</a></li>
            <li class="border"></li>
            <li>
                <div class="myJd">
                    <a href="#">我的京东</a>
                    <i class="iconfont icon-35_xiangxiajiantou"></i>
                </div>
                <div class="myJdCt"></div>
            </li>
            <li class="border"></li>
            <li><a href="#">京东会员</a></li>
            <li class="border"></li>
            <li>
                <div class="companyBuy">
                    <a href="#" id="buy">企业采购</a>
                    <!-- 设置向下字体图标 -->
                    <i class="iconfont icon-35_xiangxiajiantou"></i>
                </div>
                <div class="companyBuyCt"></div>
            </li>
            <li class="border"></li>

            <li>
                <div class="customerSvr">
                    客户服务
                    <i class="iconfont icon-35_xiangxiajiantou"></i>
                </div>
                <div class="customerSvrCt">

                </div>
            </li>
                
            <li class="border"></li>

            <li>
                <div class="webLead">
                    网站导航
                   <i class="iconfont icon-35_xiangxiajiantou"></i>
                </div>
                <div class="webLeadCt">

                </div>
            </li>
            <li class="border"></li>

            <li>
                <div class="phoneJD">
                    手机京东
                </div>
                <div class="phoneJDCt">

                </div>
            </li>
            <li class="border"></li>

            <li>
                <div class="webNonStop">
                    <a href="#">网站无障碍</a>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>